<template>
  <swiper :options="swiperOption" ref="mySwiper" v-el:swiper-wrapper>
    <!-- slides -->
    <swiper-slide v-for="item in dataSwiper">
      <a class="swiper_slide_link" href="{{ item.url }}">
        <span class="swiper_slide_img_box">
          <img class="swiper_slide_img" :src="item.pic"
               alt="{{ item.lname }}"/>
        </span>
        <span class="swiper_slide_title">{{ item.name }}</span>
      </a>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  import Vue from 'vue';
  import {swiper, swiperSlide} from 'vue-awesome-swiper';

  export default {
    data() {
      return {
        dataSwiper: window._dataSwiper || [],
        swiperOption: {
          notNextTick: true,
          pagination: '.swiper-pagination',
          paginationType: 'fraction',
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          paginationClickable: true,
          spaceBetween: 0,
          centeredSlides: true,
          autoplay: 6000,
          autoplayDisableOnInteraction: false,
          slidesPerView: 1,
          loop: true
        }
      }
    },
    compiled() {
      let w = window.util.viewData().viewWidth;
      w = w < 500 ? w : 500;
      let $ = window.$;
      let $swiperEl = $(this.$els.swiperWrapper);
      $swiperEl.height(Math.ceil(w * 170 / 375) + 'px');
      $swiperEl.find('.swiper_slide_img_box').height(Math.ceil(w * 170 / 375) + 'px').width(w + 'px');
      $swiperEl.find('.swiper_slide_img').height(Math.ceil(w * 170 / 375) + 'px').width(w + 'px');
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .swiper-container
    width: 100%
    height: 170px
    .swiper-wrapper
      .swiper-slide
        text-align: center
        display: flex
        -webkit-box-pack: center
        -ms-flex-pack: center
        -webkit-justify-content: center
        justify-content: center
        -webkit-box-align: center
        -ms-flex-align: center
        -webkit-align-items: center
        align-items: center
        cursor: pointer
        .swiper_slide_link
          display: block
          width: 100%
          height: 100%
          position: relative
          .swiper_slide_img_box
            display: block
            width: 100%
            height: 100%
            overflow: hidden
            .swiper_slide_img
              display: block
              width: 100%
              height: 100%
          .swiper_slide_title
            position: absolute
            left: 0
            right: 0
            bottom: 0
            font-size: 14px
            height: 32px
            line-height: 32px
            color: #fff
            width: 100%
            text-align: left
            padding-left: 8px
            padding-right: 46px
            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            background: rgba(0, 0, 0, 0.4)
    .swiper-pagination-fraction
      position: absolute
      width: 40px
      font-family: "Bangla MN"
      left: auto
      right: 6px
      bottom: 0px
      line-height: 26px
      height: 26px
      overflow: hidden
      color: #BDBEC7
      font-size: 14px
      font-weight: bold
      .swiper-pagination-current
        color: #fff

</style>